<template>
    <section class="py-20 md:py-32">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
        <div class="space-y-6">
          <span class="inline-block px-3 py-1 bg-indigo-100 text-indigo-800 text-sm font-medium rounded-full">AI 工具平台</span>
          <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight text-gray-900">
            释放 <span class="text-indigo-600">AI</span> 潜力<br>
            赋能创意工作
          </h1>
          <p class="text-lg text-gray-600 max-w-xl">
            一站式 AI 工具平台，集成文本生成、图像创作、数据分析等多种 AI 能力，助力您的创意与工作效率提升。
          </p>
          <div class="flex flex-wrap gap-4 pt-4">
            <button class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl hover:shadow-indigo-500/30 hover:-translate-y-1">
              开始免费试用
            </button>
            <button class="px-6 py-3 bg-white hover:bg-gray-50 text-gray-800 font-medium rounded-lg transition-all duration-300 border border-gray-300 shadow-md hover:shadow-lg hover:-translate-y-1">
              <i class="fa fa-play-circle mr-2"></i> 观看演示
            </button>
          </div>
          <div class="flex items-center space-x-4 pt-6">
            <div class="flex -space-x-2">
              <img src="https://picsum.photos/seed/user1/40/40" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
              <img src="https://picsum.photos/seed/user2/40/40" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
              <img src="https://picsum.photos/seed/user3/40/40" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
              <img src="https://picsum.photos/seed/user4/40/40" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
            </div>
            <div class="text-sm text-gray-600">
              <span class="font-semibold text-gray-900">5,000+</span> 用户正在使用
            </div>
          </div>
        </div>
        <div class="relative">
          <div class="absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl blur-lg opacity-30"></div>
          <div class="relative bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100">
            <img src="https://picsum.photos/seed/aihero/800/600" alt="AI 工具界面" class="w-full h-auto">
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
              <div class="flex items-center space-x-3">
                <div class="w-3 h-3 rounded-full bg-green-500 animate-pulse"></div>
                <span class="text-white font-medium">实时 AI 处理中</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </template>    